import './index.scss'
import uchartsStyles from '@/utils/uchartsStyles.js'

export default {
  name: 'choose-charts-style',
  props: {
    isGetChooseData: { // 是否开始返回数据
      type: Boolean,
      default: false
    },
    canvasId: {
      type: String,
      default: ''
    },
    chartsIndex: {
      type: Number,
      default: 0
    },
    chartsType: {
      type: String,
      default: ''
    },
    chartsOpts: {
      type: Object,
      default: () =>({})
    }
  },
  watch: {
    isGetChooseData() {
      if (!this.canvasId) {
        this.$message.error('请选择图表设置页面')
        return
      }
      this.$emit('chooseChartStyleFun', {
        data: this.chartsOpts, chartsIndex: this.chartsIndex
      })
    }
  },
  data() {
    return {
      locChartsOpts: {},
      baseList: [],
      xAxisList: [],
      yAxisList: [],
      legendList: [],
      extraList: [],
      tooltipList: [],
      isShow0: 0,
      isShow1: 0,
      isShow2: 0,
      isShow3: 0,
      isShow4: 0,
      isShow5: 0,
      tabsName: 0
    }
  },
  created() {
  },
  mounted() {
    this.locChartsOpts = this.chartsOpts
    this.getChartStyleList()
  },
  methods: {
    handleClick() {
      if (this.tabsName === '0') {
        this.isShow0++
      } else if (this.tabsName === '1') {
        this.isShow1++
      } else if (this.tabsName === '2') {
        this.isShow2++
      } else if (this.tabsName === '3') {
        this.isShow3++
      } else if (this.tabsName === '4') {
        this.isShow4++
      } else if (this.tabsName === '5') {
        this.isShow5++
      }
    },
    getChartStyleList() {
        if(uchartsStyles.base && uchartsStyles.base.length > 0){
          this.baseList = uchartsStyles.base
          this.baseList.forEach(item => {
            item.value = this.locChartsOpts[item.name] ? this.locChartsOpts[item.name] : item.default
            this.chartsOpts[item.name] = item.value
          })
        }
        if(uchartsStyles.xAxis && uchartsStyles.xAxis.length > 0){
          this.xAxisList = uchartsStyles.xAxis
          this.xAxisList.forEach(item => {
            item.value = this.locChartsOpts.xAxis[item.name] ? this.locChartsOpts.xAxis[item.name] : item.default;
            this.chartsOpts.xAxis[item.name] = item.value
          })
        }
        if(uchartsStyles.yAxis && uchartsStyles.yAxis.length > 0){
          this.yAxisList = uchartsStyles.yAxis
          this.yAxisList.forEach(item => {
            item.value = this.locChartsOpts.yAxis[item.name] ? this.locChartsOpts.yAxis[item.name] : item.default;
            this.chartsOpts.yAxis[item.name] = item.value
          })
        }
        if(uchartsStyles.legend && uchartsStyles.legend.length > 0){
          this.legendList = uchartsStyles.legend
          this.legendList.forEach(item => {
            item.value = this.locChartsOpts.legend[item.name] ? this.locChartsOpts.legend[item.name] : item.default;
            this.chartsOpts.legend[item.name] = item.value
          })
        }
        if(uchartsStyles.extra){
          if(!this.chartsOpts.extra){
             this.chartsOpts.extra = {}
          }
          if(this.chartsType === 'mix'){
              this.extraList= uchartsStyles.extra['mix'].column
              this.extraList.push(uchartsStyles.extra['mix'].area)
              if(!this.chartsOpts.extra['mix']){
                 this.chartsOpts.extra['mix'] = {}
                 this.chartsOpts.extra['mix'].column = {}
                 this.chartsOpts.extra['mix'].area = {}
              }
          } else if(this.chartsType === 'candle'){
              this.extraList= uchartsStyles.extra['candle'].color
              this.extraList.push(uchartsStyles.extra['candle'].average)
              if(!this.chartsOpts.extra['candle']){
                 this.chartsOpts.extra['candle'] = {}
                 this.chartsOpts.extra['candle'].color = {}
                 this.chartsOpts.extra['candle'].average = {}
              }
          } else {
            this.extraList = uchartsStyles.extra[this.chartsType]
             if(!this.chartsOpts.extra[this.chartsType]){
                this.chartsOpts.extra[this.chartsType] = {}
             }
          }
        }
        if(uchartsStyles.extra.tooltip && uchartsStyles.extra.tooltip.length > 0){
          this.tooltipList = uchartsStyles.extra.tooltip
          this.tooltipList.forEach(item => {
            item.value = this.locChartsOpts.extra.tooltip[item.name] ? this.locChartsOpts.extra.tooltip[item.name] : item.default;
            this.chartsOpts.extra.tooltip[item.name] = item.value
          })
        }
    },
    changeBaseOpts(event, prop){
      if(!this.chartsOpts){
         this.chartsOpts = {}
      }
      this.chartsOpts[prop] = event.value
    },
    changeBaseOptsSelect(event, prop){
      if(!this.chartsOpts){
         this.chartsOpts = {}
      }
      this.chartsOpts[prop] = event
    },
    changeXAxisOpts(event, prop){
      if(!this.chartsOpts.xAxis){
         this.chartsOpts.xAxis = {}
      }
      this.chartsOpts.xAxis[prop] = event.value
    },
    changeXAxisOptsSelect(event, prop){
      if(!this.chartsOpts.xAxis){
         this.chartsOpts.xAxis = {}
      }
      this.chartsOpts.xAxis[prop] = event
    },
    changeYAxisOpts(event, prop){
      if(!this.chartsOpts.yAxis){
         this.chartsOpts.yAxis = {}
      }
      this.chartsOpts.yAxis[prop] = event.value
    },
    changeYAxisOptsSelect(event, prop){
      if(!this.chartsOpts.yAxis){
         this.chartsOpts.yAxis = {}
      }
      this.chartsOpts.yAxis[prop] = event
    },
     changeLegendOpts(event, prop){
       if(!this.chartsOpts.legend){
          this.chartsOpts.legend = {}
       }
       this.chartsOpts.legend[prop] = event.value
     },
    changeLegendOptsSelect(event, prop){
      if(!this.chartsOpts.legend){
         this.chartsOpts.legend = {}
      }
     this.chartsOpts.legend[prop] = event
    },
    changeExtraOpts(event, chartType, prop){
      if(!this.chartsOpts.extra){
         this.chartsOpts.extra = {}
      }
      if(!this.chartsOpts.extra[chartType]){
         this.chartsOpts.extra[chartType] = {}
      }
      var extraChartType = this.chartsOpts.extra[chartType]
      extraChartType[prop] = event.value
    },
    changeExtraOptsSelect(event, chartType, prop){
      if(!this.chartsOpts.extra){
         this.chartsOpts.extra = {}
      }
      if(!this.chartsOpts.extra[chartType]){
         this.chartsOpts.extra[chartType] = {}
      }
      var extraChartType = this.chartsOpts.extra[chartType]
      extraChartType[prop] = event
    },
    changeTooltipOpts(event, prop){
      if(!this.chartsOpts.extra){
         this.chartsOpts.extra = {}
      }
      if(!this.chartsOpts.extra.tooltip){
         this.chartsOpts.extra.tooltip = {}
      }
      this.chartsOpts.extra.tooltip[prop] = event.value
    },
    changeTooltipOptsSelect(event, prop){
      if(!this.chartsOpts.extra){
         this.chartsOpts.extra = {}
      }
      if(!this.chartsOpts.extra.tooltip){
         this.chartsOpts.extra.tooltip = {}
      }
     this.chartsOpts.extra.tooltip[prop] = event
    }
  }
}
